import avatar from '@/assets/image.png';
import './index.css';

function TabsComponent() {
  return (
    <div
      className="article flex flex-col bg-gray-400 rounded-3xl overflow-hidden hover:scale-105 transition cursor-pointer"
      style={{ height: 425 }}
    >
      {/* 背景图片 */}
      <div className="w-full overflow-hidden" style={{ height: 170 }}>
        <img
          src="https://cencus.github.io/static/img/default-cover.df7c128c.jpg"
          alt=""
          className="object-scale-down"
        />
      </div>
      <div
        className="p-4 flex flex-col grow justify-between"
        style={{ backgroundColor: '#F1F3F5' }}
      >
        <div className="title text-3xl  w-full text-white">面试</div>
        <div className="brief text-lg text-white">
          由大到小，由粗到细 一、Linux &amp;amp; Shell总结ps -ef
          只执行ps命令，默认是显示当前控制台下属于当前用户的进程； 参数 -e
          显示运行在系统上的所有进程 参数 -f 扩展显示输出 UID 启动进程的用户 PID
          进程的进程号 PPID 父进程进程号 C cp...
        </div>

        <div className="basic-info flex flex-row w-full justify-start items-center text-white">
          <img
            className="w-7 h-7 mr-2"
            style={{ borderRadius: 14 }}
            src={avatar}
            alt=""
          />
          <span className="mr-2 font-bold text-base h-fit">Cencus</span>
          <span style={{ color: '#6d6d6d' }}>shared on May 1, 2022</span>
        </div>
      </div>
    </div>
  );
}

export default TabsComponent;
